nteraction 



ifSfnlaEM 



Tom MacWright @tmcw from MapBox @mapbox 
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Flash is a dead end 



Hopefully this goes without saying 

Maps are especially mobile 

We don't tolerate closed-source 
components 



Wednesday, April 20, 201 1 



Internet Explorer still owns 45% of the 
market 

Polymaps is working on IE9 

Even bleeding-edge browsers are still in 
early stages of optimization 

Passable for points, but rendering 
OpenStreetMap in-browser? 
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GeoJSON is nifty but bandwidth-inefficient 

Browser APIs are weak (VML?) 

Calculating polygon collisions is code-heavy 
and slow 

Simplifying polygons to speed up browsers 
doesn't cut it 
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Feature Info Example 



Semonstrates sending a GetFeaturelnfo query lo an OWS. Returns information about a map feature In the side D1V. 
'ermalink 




The (}age at openlayers.org! says: 

Unhand led request return Unexpected Error 



C o< ) 



CtA Fact book 

Click a country to see stati 
Loading... piease wa 
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Not cacheable: requires a running web 



server 



Hover interaction near-impossible 
Just as friendly and great as WMS itself 
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Zooming out makes points disappear? 
Clustering for performance reasons? 
Restricting panning? 
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Maps News Sliopping Gmail more-- 



aps food 



Search Maps 



« 



' t^ Snan' 



:a Clara, CA 

[S S W - more info s 
i99 fsabella Street, Santa Clara, CA 
|0S) 247-0745 
itegory: Fo&d 

■^^ 544 reviews 
^mazing naan chicken til<l<a" 

a - more info w 
'90 Ei Camlno Reai, Santa Clara, CA 
|[>fl)26[>-0210 
itegoryi Food 
['*'+ 99 reviews 

jwent to this restaurant on June 2, 
pm and this was ..." 

' more info a 
|45 Ei Camlno Reai, Santa Clara, CA 
|08) 243-6053 
itegory: Food 

r-*-** iS reviews 
[his location is proud of their 

service and loyal ..." 

'ant R 1^ - rrwre info j? 
J55 El Camlno Real, Santa Clara, CA 
|D&) 247-9998 
itegory: Food 

152 reviews 
ts called Mehran now and the their 
ire gone. ..." 

lUrant t^ - more info » 

JB El Camlno ReaL Santa Clara, CA 

IDS) 964-0414 
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t8 && _xdc_._ogmnqoU8([{id:"tuwtvtuwtwtuu",base:[346286080, 833464320], zrange:[l2j2],layer:"lmq:1002:food|cc:US|h:b|s:lli9D8//lbl03^ 
64%a:[0,0J,bb:[-4,-4,4,4],c:"{1:{title:\"Maggiano&Jf39;s Little Italy\%star_rating:3. 1383321, snippet:\"\\\'Thicken was dry, pasta to mushy (not a 
sauce ...\\\"\\snippet_attribution:\'^google.com\\review_count:1335}}^^},{id:"1575l33338008420%a: [-186368, 151552], bb: [-4,-4 
tar_fating:4. 0028906, snippet:\"\\\"Food really is excellent* Liked the honey wine and the combo platter. **A\\"\"^snippet_attribution:\"google.co 
:"ie2613S0680824954751\a: [-4096, -51200], bb: [-4,-4,4,4], cf^{1:{title:\'^New Krung Thai Restaurant\\star_rating:3. 5148005, snippet:\'A\\'^Delicious N 
ippet_attribution:\'^google.com\v review_count:794}}"},{fd:^^5619771407724064208\a: [-137216, 8192], bb: [-4,-4,4,4], c:"{1i{title:\'le Papillon\^sta^_ 
W'Tantastic food, every bite was amazing. Impeccable service and a great ambiance. \\\"\",snippet_attribution:\''google,com\",review_count:398}}"}, 
[-149504,12288],bb:[-4,-4,4,4],c:"{1:{title:\'lion Food Center\\star_rating:3. 1049383, snippet:\"\\\"Love it This place is located very close to t 
t ..A\\'^%snippet_attribution:\'^insiderpages,com\\review_count:83}}"},{id:'^9980106452373l63859\a: [-245760, -16384], bb: [-4,-4,4,4], c:"{1:{tit 
. 5813701, snippet:\"\\\'Tonsistent in their inconsistency. Half the dishes are average to decent, ...\\\"\",snippet_attribution:\"google.com\",revi 
I3220790l83697\a: [-169984, 43008], bb: [-4,-4,4, 4], c:"{1:{title:\^^Hitsuwa Harketplace\%star_rating:4.14634l3,snippeti\"\\\'large selection of Japan 
pened up a little ...\\\"\",snippet_attribution:\''google.com\\review_count:172}}l,{id:'^86039l64535S6024821\a: [4096, 10240], bb: [-4,-4,4,4], c:"{1: 
ant\",star_rating:3. 9508183, snippet:\"\\\"The prices are a little high, and yes the spices Just a bit toned down ,,.\\\"\",snippet_attribution:\''g 
4}}"}, {idf ^10615799977816741129", a: [-4096, 38912], bb: [-4,-4, 4, 4], c:"{1-{title:\'^Krung Thai Restaurant\",star_rating:3. 5291004, snippet:\'A\\'^My hubb 
\\\'A%snippet_attribution:\'^google,com\%review_count:586}}l,{id:"5508465026937244037\a: [-118784,-12288], bb: [-4,-4,4,4], c:'^{1:{title:\"^Super Bu 
snippet:\"\\\"Just been to this Chinese buffet. Only about 10 people were eating on a ...\\\''\",snippet_attribution:\"google,com\",review_count:10 
297%a:[-178l76,l24928],bb;[-4,-4,4,4],c:"{1:{title:\'7as Restaurant\\star_rating:3. 9757693, snippet:\"\\\"E)(cellent service. Vummy food. Great ar 
Yas Special. \\\^'\\snippet_attribution:\"google.com\\review_count:;136}}l, {id: n2827269l632l9466549\a; [-8192, -10240], bb: [-4,-4,4,4], c:"{1:{title 
rant\",star_rating:3, 5040817, snippet:\''\\\"Khanh&#39;s is an upscale Vietnamese restaurant located just across the ...\\\''\",snippet_attribution:\ 
nt:254}}'^},{id:n6l6l4404243338l3745\a;[6l44,6l44],bb;[-4,-4,4,4],c:"{1:{title:\"Sino Restaurant\\star_rating:3. 0518708, snippet:\"\\\^kip the f 
is\\\"\",snippet_attribution:\"google.com\\feview_count:l2l6}}'^},{id:"2256759042483078l56\a:[8l92,-8l92],bb:[-4,-4,4,4],c:"{1:{title:\"Straits R 
11927, snippet:\"\\\"Fun Place and Amazing FoodA\\'A\snippet_attribution:\'^google.com\\review_count:l267}}l,{id: '^9820839878706677351", a: [-14336 
:{title:\"Sela(n\",star_rating:3. 0434783, snippet:\"\\\"The restaurant needs more light and service was also somewhat slow . ..\\\"\",snippet_attribu 
ount:26}}'^}, {id: '^6497882342628758811", a: [0,45056], bb: [-4,-4,4, 4], c:"{1:{title:\"Isabella&#39;s Restaurant\'^sta^_^ating:3. 9941177, snippet:\"\\\"Fo 
could&tt39;ve been better the weiter was rude and . . .^^^"^",snippet_att^ibution;^"google.com\'^review_count:173}}'^},{id:'1215656807704432434'^a:[- 
],c:"{1;{title:\"Golden Crown Restaurant\",star_rating:3.414,snippet:\"\\\"Hate this place. The man who owns is a very rude person, service really 
on :\'^google.com\\review_count:29}}'^},{id:'74043980l8632728l25'^a: [-169984, 112640], bb: [-4,-4,4,4], c:"{1:{title:\"Hayflower Chinese Restaurant\'^st 
\"\\\"Great Taiwanese breakfast — yuo tiao, do Jiang, dan bing. ...\\\"\",snippet_attribution:\"google.co[n\",review_count:103}}"},{id:"1180960126 
],bb:[-4,-4,4,4],c:"{1:{title:\"El Amigo Burrito\\star_rating:4. 0550957, snippet:\"\\\'^Good food, reasonable prices. \\\"\'^snippet_att^ibution:\"g 
}}"},{id:"54l9452695486S27^00'^a: [2048, 2048], bb: [-4,-4,4,4], c:"{1:{title:\"Roux Kitchen\\star_rating:3. 0045044, snippet:\"\\\"|40 meal posing as a 
-as amateurish. ... \\\'^\'^snippet_attribution:\'^opentable. com\ '^review_count:671}}"}, {id:"10527137824499l23465", a; [-79872, -67584], bb: [-4,-4,4,4], c: 
hinese Restaurant\",star_rating:3. 5824742, snippet:\"\\\"Best Chinese Food in the South Bay! Ten minute pick up for practically ...\\\"\",snippet_a 
view_count:98}}'^}, {id: '^17503874109l38871184\a: [-196608, -16384], bb: [-4,-4,4,4], c:"{l:{title:\"Lock Chun Restaurant\\star_rating:4.0140843, snippet 
prices are reasonable. The people are friendly. . . A\\"\",snippet_attribution:\"yahoo.com\",review_count:73}}"},{id:"l6793995729142666700",a:[-204 
"{1:{title:\"A^by&ff39;s\^star_^ating;3,snippet:\"\\\"\^\"\^snippet_att^ibution:\"google.com\^^eview_count;35}}"},{id:'^2274036256lg926578l'^a:[- 
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Awesome idea! 



Undocumented 



Only supports points 



A single type of data 



Wednesday, April 20, 201 1 




http://bit.ly/utfg rid 

UTFGrid 
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Rasterized Tiles 



Pixel-Driven Interaction 
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JSON, in the nick of time! 
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where am I, in this tile? 
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grid [60] [80] 



jjjjjjjjjjjjjjjj: 



jjjjjjj: 

jjjjjjji 

JJJJJJJ. 

jjjjjjj_l 

jjjjjjj_ 

JJJJJJJ. 

jjjjjjj_l 

JJJJJJJ. 

jjjjjjj_ 

jjjjjjj_ 

jjjjjjj_ 



jjjjjjj_ 
jjjjjjj_ 




JJJJJJJJJJJJJJJJ. v=r 
J J J J J J J J J J J J J. I J I 
jjjjjjjjjjjjj. 
JJJJJJJJJJJJJJJJ J. 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 



ivJJJJJ- 

jj_ 
jjjjj_ 
jjjjj. 
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grid [60] [80] 



46 /h 99 



j; 



jjjjjjjjjjjjjjjj: 



jjjjjjj: 

jjjjjjji 

JJJJJJJ. 

jjjjjjj_l 

jjjjjjj_ 

JJJJJJJ. 

jjjjjjj_l 

JJJJJJJ. 

jjjjjjj_ 

jjjjjjj_ 

jjjjjjj_ 



jjjjjjj_ 
jjjjjjj_ 




JJJJJJJJJJJJJJJJ. v=r 
J J J J J J J J J J J J J. I J I 
jjjjjjjjjjjjj. 
JJJJJJJJJJJJJJJJ J. 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_ 



ivJJJJJ- 

jj_ 
jjjjj_ 
jjjjj. 
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letters are numbers after all 
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data[50] 
{ type: 'ship' 



, name: 



, loa: 40 } 




jj. 
jj. 

JJ. 
JJ. 
jj_ 
jj_ 
JJ. 
JJ. 
jj_ 
JJ. 
JJ. 
jj_ 
JJ. 
JJ. 
I J. 



jjjjjjj_i 

jjjjjjj: 
jjjjjjj. 

jjjjjjj: 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 
JJJJJJJ. 



jjjjjjj: 
JJJJJJJ. 



jjjj 
jjjj 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 



JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 



JJJJ 

JJJJ 

JJ 

JJ 

JJJJ 

JJJJ 

JJJJ 

JJJJ 

JJJJ 




ivJJJJJ- 



JJ. 
jjjjj. 
jjj-s-^rs-s^^-^-^jjjjj. 
jjjjjjjjjjjjjjjj. 
jjjjjjjjjjjjjjjj. 
JJJJJJJJJJJJJJJJ. 
JJJJJJJJJJJJJJJJ. 
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application-specific formatting 



format((lata[50]) 



jjjjjjjjjj. 
jjjjjjjjjj. 

JJJJJJJJJJ. 

UJJJJ JJ. 




jjjj 
jjjj 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 
JJJJ 



jjjjjjj 
jjjjjjj 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 
JJJJJJJ 



JJJJ 

JJJJ 

jj 

jj 

JJJJ 

JJJJ 

JJJJ 

JJJJ 

JJJJ 



JJJJJJJ. 
JJJJJJJ. 



ivJJJJj; 




JJ. 
JJJJJ. 

JJJ-s-^rS-s^^-^-^JJJJJ. 

JJJJJJJJJJJJJJJJ. 
JJJJJJJJJJJJJJJJ. 
JJJJJJJJJJJJJJJJ. 
JJJJJJJJJJJJJJJJ. 
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Hooray! 
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One UTF-8 character per feature 

256px / 256px tiles 

2x2 pixel grid (users aren't pixel-precise) 



gzip 
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Lower bound 



10246 



Upper bound 



10246 
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non-scientific survey of observed file size 

(aka, thanks, gz/p) 



2.25 



#req 



0.75 




I 







10 M 12 13 14 IS 16 17 18 



in kb 
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Federal Education Budget Project 



K-12 



Home KthroLjgfi12 

Maryland 




Compajative analysis of fundirLg, student 

demogiaphits and achievement data. 
Maryland is comprised of 24 school districts that 
seive 2,537,100 students. 



Find your state or school 
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Grid size is limited by the number of pixel 
blocks, so zooming out to the US actually 
can work 



The grid also works for points, and 

lines too 
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Once you have the grid, the mouse 
coordinate, and the tile coordinate, there 
are no loops required to find the grid 
feature, if any. 

Grid computations are typically outweighed 
by the time taken to display tooltips 

Once a grid is generated, it doesn't need to 
change. It could be a file sitting on S3. 
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. about that 'application specific formatting' 



Designed to be usable outside of a browser 

And much more than just tooltips 

You get 'just data* from the server, not 
HTML 
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// Bring your own JavaScript 
function (options, data) { 



• • • 



return formatted_output; 
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function (options, data) { 

if (options. format == 'teaser') { 

return '<hl>' + data. NAME + '</hl>'; 
} else if (options. format == 'full') { 

return '<hl>' + data. NAME + '</hl>' + data. AREA; 
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Mapnik is everyone's favorite world-beating 
open source map renderer 

Initially we rendered the map, and then 
queried a 64^ grid. It was slow. 

Dane Springmeyer has been writing a grid 
renderer deep in AGG which is way faster. 
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httD://eithub.com/maDbox/wax 



• Modest Maps 
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Grids reduce the role of mapping APIs: 
their parsing tasl< is reduced to <200 lines 

Do one thing, and do it well: provide a tiling 
interface 

Thus, for our usage. 

Modest Maps > OpenLayers. 
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Colors Fonts 



Btyle.msB 



roade.mas 



label'B.in&B 



a m 



2 
3 

5 

7 
8 
9 
IQ 
LL 
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IJ 
14 
15 
IG 
17 
LB 
19 
£ •-■ 
21 

21 
24 
25 
2& 
?7 
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(?WDtcr: t COED "3; 
3 w a t er L i ne : * 8 CE ; 

Map ^ 

\ 

frccurtricc : : DutliiiE | 

line-color : gwaterline; 

line-width :!,(>, 
} 
^.-niintri C5 ^ ; f ill ( 

polygon-fill: Qland; 

pelygfirt-gaaufia : . 75; 

\ 

^.::c:uintrie3! t f iIl[QBJECTrD=240| { 
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Grid implementation in Mapnik core - with 
bindings to nodejs and Python (LGPL & 
BSD licensed) 

Grid reader implementations in Wax, 
supporting Google Maps, OpenLayers, and 
Modest Maps (BSD licensed) 
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http://mbtiles.org/ (read the full spec) 
httD://tilemill.conn/ 



httD://github.com/maDbox/ 
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Can't highlight features yet 

More APIs! (except Bing, because ofTOS) 

Formatter spec needs security spec - 
currently relies on trust 

Contributions welcome! 
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